<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="投递记录"></myHead>
      <div class="content">
         <div class="header">
            <div class="headerBox" v-for="(x,y) in typeTit" @click="type(y)">
               <p :class="typeIndex == y?'showTyped showType':'showType'">{{x.text}}</p>
               <transition name="el-zoom-in-center">
                  <p v-show="y == typeIndex"></p>
               </transition>
            </div>
         </div>
         <!-- 空订单状态 -->
         <div class="empty" :style="{minHeight:$store.state.minHeight-1.1+'rem'}" v-show="list.length<1">
            <img src="../../../static/img/orderNo.png" alt="">
            <p>暂未发布职位</p>
         </div>

         <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功" v-show="list.length>=1">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
               <div class="order-Wrap">
                  <van-cell v-for="(item,y) in list" :key="item" >
                     <!-- 简历 -->
                     <div class="item-box">
                        <div class="item-box-l">
                           <img src="../../../static/img/uhead.jpg" alt="">
                           <div class="item-user-info">
                              <p>张三</p>
                              <div class="it-us-if">
                                 <p>20岁·本科</p>
                                 <p>5年工作经验</p>
                                 <p>北京</p>
                              </div>
                              <p>投递岗位：java工程师</p>
                           </div>
                        </div>
                        <div class="item-box-r">
                           <p>今天投递</p>
                           <p @click="look">查看简历</p>
                        </div>
                     </div>
                  </van-cell>
               </div>
            </van-list>
         </van-pull-refresh>
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
        name: "twHandsDeliveryRecord",
        components: {
            myHead
        },
        data(){
            return {
                typeTit:[{text:'代查看'},{text:'已查看'}],
                data:[{list:[]},{list:[]}],
                list:[1],
                loading: false,
                finished: false,
                refreshing: false,
                typeIndex:0
            }
        },
        methods:{
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            // 切换type
            type(index){
                this.typeIndex = index;
            },
            jump(page){
                this.$router.push({
                    name:page
                })
            },
            look(){
                this.$router.push({
                    name:'twHandsDeliveryDetails'
                })
            }
        }
    }
</script>

<style scoped>
   .wrap {
      padding-top: 1.05rem;
      box-sizing: border-box;
      background-color: #F5F5F5;
   }
   .header {
      position: fixed;
      top: .5rem;
      left: 0;
      z-index: 99;
      background-color: #FFFFFF;
      height: .45rem;
      width: 3.75rem;
      white-space: nowrap;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .header::-webkit-scrollbar {
      display: none;
   }
   .headerBox {
      width: 50%;
      height: 100%;
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
   }
   .headerBox>p:nth-child(2) {
      width: 20%;
      position: absolute;
      bottom: .05rem;
      height: .02rem;
      background-color: #FF8C3D;
   }
   .showType {
      height: .4rem;
      line-height: .4rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:bold;
      color: #333333;
   }
   .showTyped {
      color: #FF8C3D;
   }

   .order-Wrap {
      background-color: #F5F5F5;
   }

   .fenG {
      width: 100%;
      height: .1rem;
      background-color: #F5F5F5;
   }
   .empty {
      background-color: #F5F5F5;
      display: flex;
      flex-flow: column;
      align-items: center;
      box-sizing: border-box;
      padding-top: .3rem;
   }
   .empty>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
   }
   .empty>img {
      width: 1.62rem;
      max-height: 1.26rem;
      margin-bottom: .2rem;
   }


   /* 懒加载适配 */
   >>> .van-cell {
      padding: 0;
      line-height: 0;
      font-size: 0;
   }
   >>> .van-list__loading {
      font-size: .14rem;
      line-height: .5rem;
   }
   >>> .van-loading__spinner--circular{
      width: .16rem;
      height: .16rem;
   }
   >>> .van-loading__text {
      font-size: .14rem;
      margin-left: .08rem;
   }
   >>> .van-cell:not(:last-child)::after {
      border-bottom: none;
   }
   >>> .van-cell {
      margin-bottom: .1rem;
   }

   /* 弹窗 */
   /deep/ .van-dialog {
      font-size: .16rem !important;
      border-radius: .16rem !important;
      width: 3.2rem !important;

   }
   >>> .van-button--large {
      line-height: .48rem;
      height: .5rem;
   }
   >>> .van-button {
      font-size: .16rem;
      border-radius: .02rem;
   }
   >>> .van-dialog__header {
      line-height: .24rem;
   }
   >>> .van-dialog__header--isolated {
      padding: .24rem 0;
   }

   .item-box {
      min-height: .85rem;
      box-sizing: border-box;
      padding: .1rem;
      display: flex;
      flex-flow: row;
      align-items: flex-start;
      justify-content: space-between;
   }
   .item-box-l {
      width: 70%;
      display: flex;
      flex-flow: row;
      align-items: flex-start;
   }
   .item-box-l>div {
      display: flex;
      flex-flow: column;
   }
   .item-box-l>img {
      width: .5rem;
      height: .5rem;
      border-radius: 50%;
      margin-right: .1rem;
   }
   .item-user-info>p:nth-child(1) {
      font-size:.16rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
      line-height: .16rem;
      margin-bottom: .1rem;
   }
   .item-user-info>p:nth-child(3) {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:400;
      line-height: .13rem;
      color: #333333;
   }
   .it-us-if>p {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:400;
      line-height: .13rem;
   }
   .it-us-if {
      display: flex;
      flex-flow: row;
      align-items: center;
      margin-bottom: .1rem;
   }
   .it-us-if>p:nth-child(2) {
      padding: 0 .05rem;
      border-left: .01rem solid #EBEBEB;
      border-right: .01rem solid #EBEBEB;
   }
   .item-box-r {
      min-height: .85rem;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      align-items: center;
   }
   .item-box-r>p:nth-child(1) {
      font-size:.13rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #999999;
      line-height: .13rem;
   }
   .item-box-r>p:nth-child(2) {
      width:.77rem;
      height:.25rem;
      background:rgba(255,255,255,1);
      border:.01rem solid rgba(255, 108, 10, 1);
      border-radius:.13rem;
      text-align: center;
      line-height: .25rem;
      font-size:.13rem;
      font-family:Source Han Sans CN;
      font-weight:400;
      color: #FF6C0A;
   }
</style>